<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script> -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="//ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style type="text/css">
        .carousel-inner > .item > img, 
        .carousel-inner > .item > a > img {
            width: 70%;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Carousel Example</h2>
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
                <li data-target="#myCarousel" data-slide-to="3"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="imgs/img_chania.jpg" alt="Chania" width="460" height="345">
                    <div class="carousel-caption">
                        <h3>Chania</h3>
                        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
                    </div>
                </div>
                <div class="item">
                    <img src="imgs/img_chania2.jpg" alt="Chania" width="460" height="345">
                    <div class="carousel-caption">
                        <h3>Chania</h3>
                        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
                    </div>
                </div>
                <div class="item">
                    <img src="imgs/img_flower.jpg" alt="Flower" width="460" height="345">
                    <div class="carousel-caption">
                        <h3>Flowers</h3>
                        <p>Beatiful flowers in Kolymbari, Create.</p>
                    </div>
                </div>
                <div class="item">
                    <img src="imgs/img_flower2.jpg" alt="Flower" width="460" height="345">
                    <div class="carousel-caption">
                        <h3>Flowers</h3>
                        <p>Beatiful flowers in Kolymbari, Create.</p>
                    </div>
                </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <h3>Example Explained</h3>
        <p><strong>The outermost &lt;div&gt;:</strong></p>
        <p>Carousels require the use of an id (in this case <code>id="myCarousel"</code>) for carousel controls to function properly.</p>
        <p>The <code>class="carousel"</code> specifies that this <code>&lt;div&gt;</code> contains a carousel.</p>
        <p>The <code>.slide</code> class adds a CSS transition and animation effect, which makes the items slide when showing a new item. Omit this class if you do not want this effect.</p>
        <p>The <code>data-ride="carousel"</code> attribute tells Bootstrap to begin animating the carousel immediately when the page loads.</p>
        <p><strong>The "Indicators" part:</strong></p>
        <p>The indicators are the little dots at the bottom of each slide (which indicates how many slides there is in the carousel, and which slide the user are currently viewing).</p>
        <p>The indicators are specified in an ordered list with class <code>.carousel-indicators</code>.</p>
        <p>The <code>data-target</code> attribute points to the id of the carousel.</p>
        <p>The <code>data-slide-to</code> attribute specifies which slide to go to, when clicking on the specific dot.</p>
        <p><strong>The "Wrapper for slides" part:</strong></p>
        <p>The slides are specified in a <code>&lt;div&gt;</code> with class <code>.carousel-inner</code>.</p>
        <p>The content of each slide is defined in a <code>&lt;div&gt;</code> with class <code>.item</code>. This can be text or images.</p>
        <p>The <code>.active</code> class needs to be added to one of the slides. Otherwise, the carousel will not be visible.</p>
        <p><strong>The "Left and right controls" part:</strong></p>
        <p>This code adds "left" and "right" buttons that allows the user to go back and forth between the slides manually.</p>
        <p>The <code>data-slide</code> attribute accepts the keywords <code>"prev"</code> or <code>"next"</code>, which alters the slide position relative to its current position.</p>
        <h2>Add Captions to Slides</h2>
        <p>Add <code>&lt;div class="carousel-caption"&gt;</code> within each <code>&lt;div class="item"&gt;</code> to create a caption for each slide.</p>
    </div>
</body>
</html>
